<template>
    <div>
        <h2>全部分类</h2>
        <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items"
            @click-nav="getProductData" height="100vh">
            <template #content>
                <div class="mainWarp" style="background:#f3f3f3">
                    <ul class="proul">
                        <li v-for="item in list" :key="item.id">
                            <router-link :to="{ path: '/product/info', query: { proid: item.id } }"><img
                                    :src="item.thumbs_text" /></router-link>
                            <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                                <p class="tit">{{ item.name }}</p>
                            </router-link>
                            <div class="price">
                                <p>￥{{ item.price }}<span>￥8999</span></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </template>
        </van-tree-select>
    </div>

    <Footer />

</template>

<script setup>
import { ref, onBeforeMount, computed } from 'vue';
import Footer from '@/components/common/footer.vue';
const activeId = ref(null); // 当前选中的城市 ID
const activeIndex = ref(0); // 当前选中的省份索引
const items = ref([]); // 存储树形选择的数据
const typelist = ref([])
const list = ref([])
const typeid = ref('0')
const flag = ref('0')
const order = ref('createtime')
const sort = ref('desc')
const keywords = ref('')
// 计算当前选择的城市名称


// 处理选择变化
const onChange = (value) => {
    console.log('选择变化:', value);
};

// 获取产品类型数据
const getTypeData = async () => {
    let result = await Api.ProductType()
    if (result.code == 1) {
        items.value = result.data
        items.value.unshift({
            text: '全部分类', value: '0'
        })
    }
}
const getProductData = async (index) => {
    let result = await Api.ProductList({
        typeid: index,
        flag: flag.value,
        order: order.value,
        sort: sort.value,
        keywords: keywords.value
    })
    if (result.code == 1) {
        list.value = result.data
    }
}
// 在组件挂载之前调用获取数据
onBeforeMount(() => {
    getTypeData();
    getProductData();
});
const onclick = () => {
    getProductData()
}
</script>

<style>
/* 你可以在这里添加样式 */
</style>